<template>
    <view class="content py-safe-area" :class="['content-page-' + game.theme]" @tap="palyClickAudio">
        <image :src="$http.baseHOST+'image/TRUTH_OR_DARE.png'" class="header-bg" :class="{ 'show-nature': showSelectNature }" />
        <text class="select-thuth" @tap="setSelected(TRUTH)" v-if="showSelectNature">真心话</text>
        <view v-for="(item,index) in roles" :key="index"
            :class="[item.sex, diceRounding ? 'animation-' + item.sex : '', item.selected ? 'selected-index' : '']">{{
                item.nickname }}
        </view>
        <view class="go" @tap="getRounded">GO</view>
        <text class="select-dare" @tap="setSelected(DARE)" v-if="showSelectNature">大冒险</text>
        <image :src="$http.baseHOST+'image/TRUTH_OR_DARE.png'" class="footer-bg" :class="{ 'show-nature': showSelectNature }" />
        <x-popup v-model="showPopup" top="70vh" style="--x-popup-bg-image:linear-gradient(180deg, var(--item-bg-1), var(--item-bg-2))">
            <view class="h6 font-weight-600 p-4 text-center rule-color">{{ taskItem.title }}</view>
            <view class="flex-1 flex flex-center px-4">
                <view class="h8 text-center font-weight-600 rule-color">{{ taskItem.content }}</view>
            </view>
        </x-popup>
		<toggle-sound />
        <view class="btn-position flex grid-gap-4 flex-center" v-if="!diceRounding">
            <view class="bg-close text-white rounded-4 px-6 py-2 font-weight-600 text-center h8"
                hover-class="bg-danger-dark-1" @click="close(true)">结束游戏</view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue';
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { $http, $page, useGameCustom,createAudio } from '@/utils';
const showPopup = ref<boolean>(false);
const game = ref<any>({
    theme: '',
    bg: ''
});
const DARE = ref<{
    content: string;
    nature_text?: string;
    action?: string;
    icon?: string;
    style?: any;
}[]>([]);
const TRUTH = ref<{
    content: string;
    nature_text?: string;
    action?: string;
    icon?: string;
    style?: any;
}[]>([]);
const search = ref({
    vip_id: 0,
    game: 'TRUTH_OR_DARE'
});
const roles = ref<any[]>([
    {
        selected: false,
        sex: 'man',
        nickname: '男生',
        icon: './static/man.png',
    },
    {
        selected: false,
        sex: 'woman',
        nickname: '女生',
        icon: './static/woman.png',
    }
])
const clickAudioContext = createAudio('click');
const audioContext = createAudio('xiuxiuxiu');
onLoad((options: any) => {
    $page.title();
    if (options.id === 'custom') {
        const gameCustom = useGameCustom(search.value.game);
        gameCustom.get().then((data: any) => {
            DARE.value = data.filter((item: any) => item.nature == 'DARE');
            TRUTH.value = data.filter((item: any) => item.nature == 'TRUTH');
        }).catch((err: any) => {
            uni.showModal({
                title: '提示',
                content: err.msg,
                showCancel: false,
                confirmText: '返回',
                success: (res: any) => {
                    close();
                }
            })
        })
    } else {
        search.value.vip_id = options.id;
        getQuestionList();
    }
})
onUnload(() => {
    audioContext.destroy();
    clickAudioContext.destroy();
})
const getQuestionList = () => {
    $http.get('Question/list', {
        data: search.value
    })
        .then((res: any) => {
            if (res.code === $http.ResponseCode.SUCCESS) {
                game.value.theme=res.data.game.theme
                game.value.bg=res.data.game.bg
                if (res.data.game.rule_content) {
                    game.value.rule_content = res.data.game.rule_content;
                }
                DARE.value = res.data.list.filter((item: any) => item.nature == 'DARE');
                TRUTH.value = res.data.list.filter((item: any) => item.nature == 'TRUTH');
            } else {
                uni.showModal({
                    title: '提示',
                    content: res.msg,
                    showCancel: false,
                    confirmText: '返回',
                    success: (res: any) => {
                        close();
                    }
                })
            }
        }).catch((err: any) => {
        })
}
const diceRounding = ref<boolean>(false);
const showSelectNature = ref<boolean>(false);
const taskItem = ref({
    title: '任务',
    content: '',
    icon: '',
})
const setSelected = (list: any) => {
    // 随机从list中取出一个
    const item = list[Math.floor(Math.random() * list.length)];
    if (!item) {
        taskItem.value.title = '任务';
        taskItem.value.content = '暂无任务';
        showPopup.value = true;
        diceRounding.value = false;
        showSelectNature.value = false;
        return;
    }
    // 从roles取出选中的角色
    const role1 = roles.value.find((item: any) => item.selected);
    // 从roles取出未选中的角色
    const role2 = roles.value.find((item: any) => !item.selected);
    taskItem.value.title = item.nature_text || '任务';
    let content = item.content;
    // {$role1},{$role2}
    content = content.replaceAll('{$role1}', role1.nickname);
    content = content.replaceAll('{$role2}', role2.nickname);
    taskItem.value.content = content;
    taskItem.value.icon = item.icon;
    showPopup.value = true;
    diceRounding.value = false;
    showSelectNature.value = false;
}
const getRounded = () => {
    if (diceRounding.value) { return; }
    diceRounding.value = true;
    const result = Math.floor(Math.random() * 6 + 1) % 2;
    if (result === 0) {
        roles.value[0].selected = true;
        roles.value[1].selected = false;
    } else {
        roles.value[0].selected = false;
        roles.value[1].selected = true;
    }
    const audioTimeEr=setInterval(() => {
        audioContext.restPlay();
    }, 500);
    nextTick(() => {
        setTimeout(() => {
            clearInterval(audioTimeEr);
            showSelectNature.value = true;
        }, 2000);
    })
}
const close = (confirm?: boolean) => {
    if (confirm) {
        uni.showModal({
            title: '提示',
            content: '确定要结束游戏吗？',
            success: (res: any) => {
                if (res.confirm) {
                    close();
                }
            }
        })
        return;
    }
    $page.switch('/pages/index/index');
}
const palyClickAudio = () => {
    clickAudioContext.restPlay();
}
</script>

<style lang="scss" scoped>
.content {
    --content-bg: linear-gradient(180deg, #fdcbf1, #e6dee9);
    --item-bg-1: #df89b5;
    --item-bg-2: #bfd9fe;
    --rule-color: #e6dee9;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
    background-color: #e5014a;
	box-sizing: border-box;

    &-page-black {
        --content-bg: linear-gradient(180deg, #0c1014, #121c29);
        --item-bg-1: #27282d;
        --item-bg-2: #2e3035;
        --rule-color: var(--xl-white);
    }

    &-page-purple {
        --content-bg: linear-gradient(180deg, #4a4c92, #363455);
        --item-bg-1: #817fa4;
        --item-bg-2: #918fb3;
        --rule-color: var(--xl-white);
    }

    &-page-cyan {
        --content-bg: linear-gradient(180deg, #022227, #325b5d);
        --item-bg-1: #7a9ba0;
        --item-bg-2: #7d9ea3;
        --rule-color: var(--xl-white);
    }

    &-page-silvery {
        --content-bg: linear-gradient(180deg, #acb6bf, #506382);
        --item-bg-1: #c4cbd5;
        --item-bg-2: #a2a8b2;
        --rule-color: var(--xl-white);
    }
}
.rule-color{
	color: var(--rule-color);
}

.header-bg,
.footer-bg {
    width: 100vw;
    transition: all 1s ease;
}

.header-bg {
    transform: rotate(180deg);
    position: absolute;
    top: -100px;
}

.header-bg.show-nature {
    top: -25px;
}

.footer-bg {
    position: absolute;
    bottom: -100px;
}

.footer-bg.show-nature {
    bottom: -25px;
}

.select-thuth,
.select-dare {
    position: absolute;
    color: #FFFFFF;
    font-size: 25px;
    z-index: 100;
    width: 100vw;
    height: 150px;
    padding: 0 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.select-thuth {
    box-sizing: border-box;
}

.select-dare {
    bottom: 0;
    text-align: right;
    box-sizing: border-box;
}

.btn-position {
    width: 70%;
    position: absolute;
    left: 50%;
    bottom: 125px;
    transform: translate(-50%, -50%);

    .bg-close {
        background-color: #d80643;
    }
}

.man,
.woman {
    position: absolute;
    top: 50%;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 25px;
    color: #fff;
    background-color: #ba002f;
    border-radius: 50%;
    z-index: 99;
}

.man {
    left: 20%;
    transform: translate(-50%, -50%);
}

.woman {
    right: 20%;
    transform: translate(50%, -50%);
}

.go {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    text-align: center;
    font-size: 40px;
    color: #fff;
    font-weight: 600;
    background-color: #ba002f;
    border-radius: 50%;
    border: 0.3rem solid #f292b1;
    box-shadow: 0 0 0 25px #e56d94, 0 0 0 50px #e64c7a;
    animation: animationGo 3s infinite;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes animationGo {
    0% {
        box-shadow: 0 0 0 25px #e075ae, 0 0 0 50px #e64c7a;
    }

    40% {
        box-shadow: 0 0 0 0 #e075ae, 0 0 0 0 #e64c7a;
    }

    to {
        box-shadow: 0 0 0 25px #e075ae, 0 0 0 50px #e64c7a;
    }
}

.selected-index {
    z-index: 100;
}

.animation-man {
    animation: animation-man 2s .5s ease both
}

@keyframes animation-man {
    0% {
        left: 20%;
        top: 50%
    }

    20% {
        left: 50%;
        top: 25%
    }

    40% {
        left: 80%;
        top: 50%
    }

    60% {
        left: 50%;
        top: 75%
    }

    80% {
        left: 20%;
        top: 50%
    }

    to {
        left: 50%;
        top: 50%
    }
}

.animation-woman {
    animation: animation-woman 2s .5s ease both
}

@keyframes animation-woman {
    0% {
        right: 20%;
        top: 50%
    }

    20% {
        right: 50%;
        top: 75%
    }

    40% {
        right: 80%;
        top: 50%
    }

    60% {
        right: 50%;
        top: 25%
    }

    80% {
        right: 20%;
        top: 50%
    }

    to {
        right: 50%;
        top: 50%
    }
}
</style>
